<template>
  <div>
    <svg xmlnx="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
      <line :x1="_createObj.x1" :x2="_createObj.x2+'mm'" :y1="_createObj.y+'mm'" :y2="_createObj.y+'mm'"
            :style="styleObj"></line>
    </svg>
    <div style="border-top: 10px solid;width: 100mm;border-radius: 10px"></div>
  </div>
</template>

<script>
export default {
  name: "lineHDemo",
  props: {
    title: {default: ''},
    appearanceProp: {type: Object, default: _ => ({})},
    createObj: {type: Object, default: _ => ({})}
  },
  data() {
    return {
      typeId: 'horizontalLineShape',
      typeName: '水平线',
      descStr: '水平线',
      verNum: 1,
      subjectType: 0,
      id: '',
      properties: {
        border: false,
        stroke: true,
        fill: false,
        text: false,
        image: false
      },
      stroke: {
        lineWidth: 0.2,
        lineColor: '#000',
        strokeOpacity: 1,
        // 0 齐头，1 圆头，2 方头
        lineCap: 0,
        // 0 斜角，1 圆角，2 方角
        lineJoin: 0,
        miterLimit: 10,
        dashPattern: [],
        dashOffset: 0
      },
      createObjData: {type: 0, id: '', x1: 0, x2: 100, y: 0}
    }
  },
  computed: {
    _appearanceProp() {
      this.stroke = {...this.stroke, ...this.appearanceProp};
      return this.stroke;
    },
    _createObj() {
      this.createObjData = {...this.createObjData, ...this.createObj};
      return this.createObjData;
    },
    styleObj() {
      if (!this._createObj.y) this._createObj.y = this.stroke.lineWidth / 2
      return {
        stroke: this.stroke.lineColor,
        strokeWidth: (this.stroke.lineWidth || 1) + 'mm',
        strokeOpacity: this.stroke.strokeOpacity,
        strokeLinecap: this.stroke.lineCap === 1 ? 'round' : this.stroke.lineCap === 2 ? 'square' : 'butt',
        strokeLinejoin: this.stroke.lineJoin === 1 ? 'round' : this.stroke.lineJoin === 2 ? 'miter' : 'bevel',
        strokeDasharray: String(this.stroke.dashPattern),
        strokeDashoffset: this.stroke.dashOffset
      }
    }
  }
}
</script>

<style scoped>

</style>
